<template>
	<view>
		<!-- 搜索关键字结果 -->
		<view class="search-info">
			<text class="search-text">
				搜索关键字：→ {{searchInfo}} ← 结果
			</text>
		</view>
		<!-- 搜索结果的博客列表 -->
		<blog-list :blog-list="blogList"></blog-list>
		<!-- 是否有数据 -->
		<blog-reach-bottom v-if="!hasData"></blog-reach-bottom>
		<!-- 版权信息 -->
		<copyright></copyright>
	</view>
</template>

<script>
	import blogApi from '@/api/blog.js'
	export default {
		data() {
			return {
				searchInfo: '', // 搜索的关键字
				blogList: [], // 博客列表
				paramPage: { // 分页对象
					currentPage: 1,
					pageSize: 2,
					params: {
						// 自定义参数
						blogTitle: this.searchInfo
					}
				},
				hasData: true, // 是否有数据，默认true有数据
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initData();
		},
		// 上拉刷新
		onReachBottom() {
			if(this.hasData) {
				// 当前页加1
				this.paramPage.currentPage = this.paramPage.currentPage + 1;
				// 在加载列表
				this.getBlogList();
			}
		},
		onLoad(e) {
			this.searchInfo = e.searchInfo;
			this.initData();
		},
		methods: {
			// 初始化数据
			initData() {
				// 初始化分页对象
				this.paramPage = {
					currentPage: 1,
					pageSize: 8,
					params: {
						// 自定义参数
						blogTitle: this.searchInfo
					}
				};
				this.blogList = []; 
				this.getBlogList();
				uni.stopPullDownRefresh();
			},
			// 加载博客列表
			getBlogList() {
				this.paramPage.params.typeId = this.activeMenu;
				blogApi.getByPage(this.paramPage).then(res => {
					let dataList = res.data.list;
					if(dataList[0]) {
						//追加数据,有数据
						this.hasData = true
						this.blogList.push(...dataList)
					}else {
						this.hasData = false
					}
				})
			}
		}
	}
</script>

<style>
@import url("./index.css");
</style>
